<template>
  <div class="wrap">
    <header>动态组件</header>
    <main>
      <component :is="componentId"></component>
    </main>
    <footer>
      <ul>
        <li
          v-for="tab,index in tabs"
          :class="{active: index === currentIndex}"
          @click="handleClick(index, tab.component)"
        >
          {{tab.name}}
        </li>
      </ul>
    </footer>
  </div>
</template>

<script>
import Home from './Home'
import Search from './Search'
import Profile from './Profile'

export default {
  data() {
    return {
      tabs: [
        {
          id: '001',
          name: '首页',
          component: Home
        },
        {
          id: '002',
          name: '搜索',
          component: Search
        },
        {
          id: '003',
          name: '我的',
          component: Profile
        }
      ],
      currentIndex: 0,
      componentId: Home
    }
  },

  methods: {
    handleClick(index, comp) {
      this.currentIndex = index
      this.componentId = comp
    }
  },
}
</script>

<style lang='css'>
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
body {
  overflow: hidden;
}
#root {
  height: 100%;
}
div.wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
}
div header {
  height: 44px;
  background: chocolate;
  color: #fff;
  text-align: center;
  line-height: 44px;
}
div main {
  flex: 1;
}
div footer ul {
  height: 44px;
  display: flex;
  border-top: solid 1px #ccc;
}
div footer ul li {
  flex: 1;
  list-style: none;
  line-height: 44px;
  text-align: center;
}
div footer ul li.active {
  color: #fff;
  background: chocolate;
}
</style>